<template>
	<view class="container">
		<uni-nav-bar
		fixed="true" 
		color="#ffffff"
		:border="false"
		:left-icon="leftIcon"
		@clickLeft="leftFunc"
		background-color="rgba(0, 0, 0, 0)" 
		:status-bar="true" 
		:title="`${productTypeName}详情`"  />
		<view class="content">
			<swiper style="height: 750rpx;" autoplay="autoplay" interval="5000" duration="400" circular="true" v-if="bannerList.length">
				<swiper-item class="main-img" v-for="(banner, index) in bannerList" :key="index">
					<image class="main-img" :src="banner" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<!-- <image :src="details.banner" class="main-img" mode="widthFix"></image> -->
			<view class="product-infor">
				<view class="name">{{details.name}}</view>
				<view class="desc" v-if="details.introduce">{{details.introduce}}</view>	
				<view class="price" v-if="details.price==0"><text class="middle">免费领取</text></view>
				<view class="price" v-else><text class="small">¥</text>{{details.price}}</view>
			
				<view class="count-wrapper" v-if="details.type != 4">
					<count :store="details.store" :maxNum="details.price==0?details.maxNum:details.store" :count.sync="details.productCount"></count>
				</view>
			</view>
			<view class="details-wrapper">
				<view class="title">{{productTypeName}}详情</view>
				<view class="details">
					<rich-text :nodes="nodes"></rich-text>
				</view>
			</view>
			<view class="menu-wrapper">
				<bottom-menu :details="details" ref="bottomMenu"></bottom-menu>
			</view>
			<view class="place"></view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import count from './count.vue'
	import bottomMenu from './bottom-menu.vue'
	import { frontDetail } from '@/api/product.js'
	export default {
		components: {uniNavBar, count, bottomMenu},
		data() {
			return {
				leftIcon: 'back',
				productId: '',
				shopId: undefined,
				details: {},
				bannerList: [],
				nodes: '',
				backCount:''
			}
		},
		computed: {
			productTypeName () {
			  return this.details.type != 4 ? '商品' : '服务'
			}
		},
		onLoad(option) {
			if (option.leftIcon) {
				this.leftIcon = option.leftIcon
			}
			this.productId = option.productId
			this.shopId = option.shopId;
			
		},
		onShow() {
			this.getDetails()
			
		},
		methods: {
			getDetails() {
				const data = {
					productId: this.productId
				}
				frontDetail(data).then(respanse => {
					const {detail, store, type,shopId} = respanse.result
					this.shopId = shopId
					if (detail) {
						this.nodes = detail.replace(/\<img/gi, '<img style="max-width: 100% !important;height: auto!important;display: block!important"')
					}
					this.details = respanse.result

					let count=0
					if(uni.getStorageSync('num')){
						count=uni.getStorageSync('num')
						uni.removeStorageSync('num')
					}
					this.bannerList = respanse.result.banner.split(',')
					if (type != 4) {
						if (store > 0) {
							this.$set(this.details, 'productCount', count?count:1)
						} else {
							this.$set(this.details, 'productCount', 0)
						}
					} else {
						this.$set(this.details, 'productCount', 1)
					}
					
					this.$refs.bottomMenu.getCartList(this.shopId);
				})
				
				
			},
			leftFunc() {
				if (this.leftIcon == 'back') {
					uni.navigateBack()
				} else{
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
				
			}
		},
		onShareAppMessage(res) {
			const {name, image, id} = this.details
			return {
				title: name  || '魔利购',
				imageUrl: image,
				path: `/pages/product-details/index?productId=${id}&leftIcon=home`

			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-navbar__placeholder{
		display: none !important;
	}
	/deep/.uni-navbar__header {
		padding-left: 10rpx;
	}
	/deep/.uni-icons {
		background-color: rgba(0,0,0,0.4);
		border-radius: 50%;
	}
	.main-img{
		display: block;
		width: 100%;
	}
	.product-infor{
		position: relative;
		padding: 24rpx 24rpx 30rpx;
		margin: 25rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		.name{
			line-height: 48rpx;
			font-size: 38rpx;
			font-weight: bold;
			color: #000000;
		}
		.desc{
			margin-top: 12rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #999999;
		}
		.price{
			margin-top: 24rpx;
			line-height: 51rpx;
			font-size: 51rpx;
			color: #ED602B;
			.middle{
				font-size: 38rpx;
			}
			.small{
				font-size: 24rpx;
			}
		}
		
		.count-wrapper{
			position: absolute;
			right: 10rpx;
			bottom: 24rpx;
		}
	}
	.details-wrapper{
		padding: 22rpx 24rpx;
		margin: 20rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		.title{
			line-height: 42rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}
		.details{
			padding-top: 21rpx;
		}
	}
	.menu-wrapper{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	.place{
		height: 104rpx;
		visibility: hidden;
	}

</style>
